<template>
  <div>
    <customDialog
      :title="`自定义配置表格列`"
      :dialogVisible="dialogVisible"
      @close="dialogVisible = false"
      @confirm="confirm"
      width="810"
    >
      <div class="checkbox_wrapper">
        <!-- 左侧勾选列 -->
        <div class="checkbox_left">
          <el-checkbox-group v-model="checkArr">
            <template v-for="(item, i) in columns" :key="item.prop">
              <el-checkbox
                v-if="item.prop != 'operator'"
                :label="item"
                class="check_item"
                :disabled="item?.fixed ? true : false"
                @change="handleChecked(item, i)"
              >
                {{ item.label }}
              </el-checkbox>
            </template>
          </el-checkbox-group>
        </div>
        <!-- 右侧拖拽排序 -->
        <div class="checkbox_right">
          <!-- handle=".handle"  -->
          <template v-if="fixedLeftColumns.length > 0">
            <p class="right_title">固定在左侧</p>
            <div>
              <li
                class="columns"
                v-for="(item, i) in fixedLeftColumns"
                :key="i"
              >
                <span class="text">{{ item.label }} </span>
              </li>
            </div>
          </template>
          <template v-if="fixedRightColumns.length > 0">
            <p class="right_title">固定在右侧</p>
            <div>
              <li
                class="columns"
                v-for="(item, i) in fixedRightColumns"
                :key="i"
              >
                <span class="text">{{ item.label }} </span>
              </li>
            </div>
          </template>
          <template v-if="dragColumns.length > 0">
            <p class="right_title">不固定</p>
            <draggable :list="checkArr" item-key="label">
              <template #item="{ element }">
                <li class="columns">
                  <el-icon class="handle icon_check">
                    <Sort />
                  </el-icon>
                  <span class="text">{{ element.label }} </span>
                </li>
              </template>
            </draggable>
          </template>
        </div>
      </div>
    </customDialog>
  </div>
</template>

<script lang="ts" setup>
import customDialog from "@/components/CustomDialog/index.vue";
import { ref, reactive, toRefs, computed } from "vue";
import { cloneDeep, debounce } from "lodash-es";
import draggable from "vuedraggable";
import { Sort } from "@element-plus/icons-vue";
import { removeDuplicate } from "@/utils/array";

const dialogVisible = ref(false);
const checkArr = ref<Array<any>>([]);
const columns = ref<any>([]);
const fixedLeftColumns = ref<Array<any>>([]);
const fixedRightColumns = ref<Array<any>>([]);
const dragColumns = ref<Array<any>>([]);

// 修改选中
const handleChecked = (val: any, i: number) => {
  val.isShow = !val.isShow;
};

// 确定修改表格列
const emit = defineEmits(["success"]);
const confirm = () => {
  // console.log("提交的columns.value ---- ", columns.value);
  // console.log("提交的checkArr.value ---- ", checkArr.value);
  let tempArr: any = [];
  let m = checkArr.value.map((i: any) => i.label);
  columns.value.map((item: any) => {
    if (!m.includes(item?.label)) {
      tempArr.push(item);
    }
  });
  const arr = removeDuplicate([...checkArr.value, ...tempArr]);
  // console.log("arr--****", arr);
  emit("success", arr);
  dialogVisible.value = false;
};

// 父级电子显示dialog
const showDialog = (data: any) => {
  // console.log("显示弹窗column信息-*----", data);
  // 初始化
  columns.value = [];
  checkArr.value = [];
  fixedLeftColumns.value = [];
  fixedRightColumns.value = [];
  dragColumns.value = [];
  dialogVisible.value = true;
  let temp = cloneDeep(data);

  //  给所有元素都添加isShow字段
  temp.filter((item: Record<string, any>) => {
    if (item?.hidden) {
      item.isShow = false;
    } else {
      columns.value.push(item);
    }
  });
  //  /过滤不必要的元素，筛选出默认选中
  columns.value.filter((i: Record<string, any>) => {
    if (i.isShow && i.prop != "operator") {
      checkArr.value.push(i);
    }
  });
  checkArr.value.map((j) => {
    if (j?.fixed == "left") {
      fixedLeftColumns.value.push(j);
    } else if (j?.fixed == "right") {
      fixedRightColumns.value.push(j);
    } else {
      dragColumns.value.push(j);
    }
  });
};

defineExpose({
  showDialog,
});
</script>

<style scoped lang="scss">
.checkbox_wrapper {
  display: flex;
  justify-content: space-between;
  // border-bottom: 1px solid #ccc;
  .checkbox_right {
    width: 185px;
    max-height: 520px;
    overflow-y: scroll;

    .right_title {
      padding-left: 15px;
      margin: 10px 0;
      font-weight: bold;
      // font-family: "微软雅黑";
    }

    .columns {
      padding: 2px 0 2px 15px;
      margin: 6px 15px;
      // background-color: #ebebeb;
      border: 1px solid #eee;
      border-radius: 2px;

      .icon_check {
        margin-right: 10px;
        vertical-align: middle;
      }
    }

    .columns:hover {
      cursor: grab;
    }

    &::-webkit-scrollbar {
      width: 10px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      background: #ebebeb;
      border-radius: 10px;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: #ccc;
      border-radius: 10px;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
      background: #ccc;
    }
  }

  .checkbox_left {
    flex: 1;
    border-right: 1px solid #eee;

    .check_item {
      width: 20%;
      margin-right: 28px;
      margin-bottom: 10px;
    }
  }
}
</style>
